irongit
Sign inRegister
huncholanehuncholane/dotbarPublic

Waybar configuration

dotbar/style/[WALLUST] ML4W-modern-mixed.css
388 lines7.4 KBCSS
RawDownloadHistory
1/* ---- 💫 https://github.com/JaKooLit 💫 ---- */
2/* ml4w-modern-mixed */
3
4@import '../../.config/waybar/wallust/colors-waybar.css';
5
6@define-color backgroundlight @color12;
7@define-color backgrounddark #FFFFFF;
8@define-color workspacesbackground1 @color12;
9@define-color workspacesbackground2 #FFFFFF;
10@define-color bordercolor @color11;
11@define-color textcolor1 @color12;
12@define-color textcolor2 #FFFFFF;
13@define-color textcolor3 #FFFFFF;
14@define-color iconcolor #FFFFFF;
15
16* {
17 font-family: "JetBrainsMono Nerd Font";
18 font-weight: bold;
19 min-height: 0;
20 /* set font-size to 100% if font scaling is set to 1.00 using nwg-look */
21 font-size: 97%;
22 /* note: different modules have different font sizes */
23 font-feature-settings: '"zero", "ss01", "ss02", "ss03", "ss04", "ss05", "cv31"';
24}
25
26window#waybar {
27 background-color: rgba(0,0,0,0.8);
28 border-bottom: 0px solid #ffffff;
29 /* color: #FFFFFF; */
30 background: transparent;
31 transition-property: background-color;
32 transition-duration: .5s;
33}
34
35#taskbar,
36#workspaces {
37 background: @workspacesbackground1;
38 margin: 2px 18px 3px 1px;
39 margin-left: 6px;
40 padding: 0px 2px;
41 border-radius: 5px 5px 5px 5px;
42 border: 0px;
43 font-weight: bold;
44 font-style: normal;
45 opacity: 0.8;
46 color: @textcolor1;
47}
48
49#taskbar button,
50#workspaces button {
51 padding: 0px 6px;
52 margin: 3px 2px;
53 border-radius: 3px 3px 3px 3px;
54 color: @textcolor1;
55 background-color: @workspacesbackground2;
56 transition: all 0.1s linear;
57 opacity: 0.4;
58}
59
60#taskbar button.active,
61#workspaces button.active {
62 color: @textcolor1;
63 background: @workspacesbackground2;
64 border-radius: 3px 3px 3px 3px;
65 min-width: 30px;
66 transition: all 0.1s linear;
67 opacity:1.0;
68}
69
70#taskbar button.hover,
71#workspaces button:hover {
72 color: @textcolor1;
73 background: @workspacesbackground2;
74 border-radius: 5px 5px 5px 5px;
75 opacity:0.7;
76}
77
78tooltip {
79 border-radius: 16px;
80 background-color: @backgroundlight;
81 opacity:0.9;
82 padding:20px;
83 margin:0px;
84}
85
86tooltip label {
87 color: @textcolor2;
88}
89
90#window {
91 margin: 3px 15px 3px 0px;
92 padding: 2px 10px 0px 10px;
93 border-radius: 5px 5px 5px 5px;
94 color:white;
95 font-weight:normal;
96 opacity:0.8;
97}
98
99window#waybar.empty #window {
100 background-color:transparent;
101}
102
103#taskbar.empty {
104 background:transparent;
105 border:0;
106 padding:0;
107 margin:0;
108}
109
110.modules-left > widget:first-child > #workspaces {
111 margin-left: 0;
112}
113
114.modules-right > widget:last-child > #workspaces {
115 margin-right: 0;
116}
117
118#backlight,
119#backlight-slider,
120#battery,
121#bluetooth,
122#clock,
123#cpu,
124#disk,
125#idle_inhibitor,
126#keyboard-state,
127#memory,
128#mode,
129#mpris,
130#network,
131#power-profiles-daemon,
132#pulseaudio,
133#pulseaudio-slider,
134#taskbar button,
135#taskbar,
136#temperature,
137#tray,
138#window,
139#wireplumber,
140#workspaces,
141#custom-backlight,
142#custom-browser,
143#custom-cava_mviz,
144#custom-cycle_wall,
145#custom-dot_update,
146#custom-file_manager,
147#custom-keybinds,
148#custom-keyboard,
149#custom-light_dark,
150#custom-lock,
151#custom-hint,
152#custom-hypridle,
153#custom-menu,
154#custom-playerctl,
155#custom-power_vertical,
156#custom-power,
157#custom-quit,
158#custom-reboot,
159#custom-settings,
160#custom-spotify,
161#custom-swaync,
162#custom-tty,
163#custom-updater,
164#custom-weather,
165#custom-weather.clearNight,
166#custom-weather.cloudyFoggyDay,
167#custom-weather.cloudyFoggyNight,
168#custom-weather.default,
169#custom-weather.rainyDay,
170#custom-weather.rainyNight,
171#custom-weather.severe,
172#custom-weather.showyIcyDay,
173#custom-weather.snowyIcyNight,
174#custom-weather.sunnyDay {
175 padding: 2px;
176 margin-right: 8px;
177 margin-left: 6px;
178 font-size: 100%;
179 opacity: 0.8;
180 color: @iconcolor;
181}
182
183#custom-swaync {
184 margin-left: 12px;
185}
186
187#idle_inhibitor {
188 margin-right: 15px;
189 font-size: 102%;
190 font-weight: bold;
191 opacity: 0.8;
192 color: @iconcolor;
193}
194
195#idle_inhibitor.activated {
196 margin-right: 15px;
197 font-size: 100%;
198 font-weight: bold;
199 opacity: 0.8;
200 color: #dc2f2f;
201}
202
203#custom-menu {
204 background-color: @backgrounddark;
205 color: @textcolor1;
206 border-radius: 5px 5px 5px 5px;
207 padding: 0px 10px 0px 10px;
208 margin: 2px 17px 2px 0px;
209 opacity:0.8;
210 border:3px solid @bordercolor;
211}
212
213#custom-power {
214 background-color: @backgrounddark;
215 color: @textcolor1;
216 border-radius: 5px 5px 5px 5px;
217 padding: 0px 0px 0px 6px;
218 opacity:0.8;
219 border:3px solid @bordercolor;
220}
221
222#custom-keybinds {
223 margin: 0px 13px 0px 0px;
224 padding:0px;
225 color: @iconcolor;
226 opacity: 0.8;
227}
228
229#custom-updater {
230 background-color: @backgroundlight;
231 color: @textcolor2;
232 border-radius: 5px 5px 5px 5px;
233 padding: 2px 10px 0px 10px;
234 margin: 3px 15px 3px 0px;
235 opacity:0.8;
236}
237
238#custom-updates.green {
239 background-color: @backgroundlight;
240}
241
242#custom-updates.yellow {
243 background-color: #ff9a3c;
244 color: #FFFFFF;
245}
246
247#custom-updates.red {
248 background-color: #dc2f2f;
249 color: #FFFFFF;
250}
251
252#keyboard-state {
253 margin-right:10px;
254}
255
256#clock {
257 background-color: @backgrounddark;
258 color: @textcolor1;
259 border-radius: 3px 5px 3px 5px;
260 padding: 1px 10px 0px 10px;
261 margin: 3px 0px 3px 0px;
262 opacity:0.8;
263 border:3px solid @bordercolor;
264}
265
266#backlight {
267 background-color: @backgroundlight;
268 margin-left: 6px;
269 color: @textcolor2;
270 border-radius: 5px 5px 5px 5px;
271 padding: 2px 10px 0px 10px;
272 margin: 3px 15px 3px 0px;
273 opacity:0.8;
274}
275
276#pulseaudio {
277 background-color: @backgroundlight;
278 color: @textcolor2;
279 border-radius: 5px 5px 5px 5px;
280 padding: 2px 10px 0px 10px;
281 margin: 3px 15px 3px 0px;
282 opacity:0.8;
283}
284
285#pulseaudio.muted {
286 background-color: @backgrounddark;
287 color: @textcolor1;
288}
289
290#network {
291 background-color: @backgroundlight;
292 color: @textcolor2;
293 border-radius: 5px 5px 5px 5px;
294 padding: 2px 10px 0px 10px;
295 margin: 3px 15px 3px 0px;
296 opacity:0.8;
297}
298
299#network.ethernet {
300 background-color: @backgroundlight;
301 color: @textcolor2;
302}
303
304#network.wifi {
305 background-color: @backgroundlight;
306 color: @textcolor2;
307}
308
309#bluetooth, #bluetooth.on, #bluetooth.connected {
310 background-color: @backgroundlight;
311 color: @textcolor2;
312 border-radius: 5px 5px 5px 5px;
313 padding: 2px 10px 0px 10px;
314 margin: 3px 15px 3px 0px;
315 opacity:0.8;
316}
317
318#bluetooth.off {
319 background-color: transparent;
320 padding: 0px;
321 margin: 0px;
322}
323
324#battery {
325 background-color: @backgroundlight;
326 color: @textcolor2;
327 border-radius: 5px 5px 5px 5px;
328 padding: 2px 15px 0px 10px;
329 margin: 3px 15px 3px 0px;
330 opacity:0.8;
331}
332
333#battery.charging, #battery.plugged {
334 color: @textcolor2;
335 background-color: @backgroundlight;
336}
337
338@keyframes blink {
339 to {
340 background-color: @backgroundlight;
341 color: @textcolor2;
342 }
343}
344
345#battery.critical:not(.charging) {
346 background-color: #f53c3c;
347 color: @textcolor3;
348 animation-name: blink;
349 animation-duration: 3.0s;
350 animation-timing-function: steps(12);
351 animation-iteration-count: infinite;
352 animation-direction: alternate;
353}
354
355#tray {
356 padding: 0px 15px 0px 0px;
357}
358
359#tray > .passive {
360 -gtk-icon-effect: dim;
361}
362
363#tray > .needs-attention {
364 -gtk-icon-effect: highlight;
365}
366
367#backlight-slider slider,
368#pulseaudio-slider slider {
369 min-width: 0px;
370 min-height: 0px;
371 opacity: 0;
372 background-image: none;
373 border: none;
374 box-shadow: none;
375}
376
377#backlight-slider trough,
378#pulseaudio-slider trough {
379 min-width: 80px;
380 min-height: 5px;
381 border-radius: 5px;
382}
383
384#backlight-slider highlight,
385#pulseaudio-slider highlight {
386 min-height: 10px;
387 border-radius: 5px;
388}